<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
    <script src =" https://unpkg.com/axios/dist/axios.min.js"> </script>
    <style>
       * {
         margin: 0;
         padding:0;
       }
       body {
         color: #5e5b64;
         text-align: center;
       }
       a, a:visited {
         outline: none;
         color: #389dc1;
       }
       a:hover {
         text-decoration: none;

       }
       section,footer,header,aside,nav{
         display: block;
       }
       nav{
		display:inline-block;
		margin:60px auto 45px;
		background-color:#5597b4;
		box-shadow:0 1px 1px #ccc;
		border-radius:2px;
	}
  nav a{
		display:inline-block;
		padding: 18px 30px;
		color:#fff !important;
		font-weight:bold;
		font-size:16px;
		text-decoration:none !important;
		line-height:1;
		text-transform: uppercase;
		background-color:transparent;

		-webkit-transition:background-color 0.25s;
		-moz-transition:background-color 0.25s;
		transition:background-color 0.25s;
	}
  nav a:first-child{
		border-radius:2px 0 0 2px;
	}

	nav a:last-child{
		border-radius:0 2px 2px 0;
	}

	nav.home .home,
	nav.projects .projects,
	nav.services .services,
	nav.contact .contact{
		background-color:#e35885;
	}

	p{
		font-size:22px;
		font-weight:bold;
		color:#7d9098;
	}

	p b{
		color:#ffffff;
		display:inline-block;
		padding:5px 10px;
		background-color:#c4d7e0;
		border-radius:2px;
		text-transform:uppercase;
		font-size:18px;
	}


    </style>
</head>


<body>
    <div id="app">
     <nav v-bind:class="active" v-on:click.prevent>
       <a href="#" class="home" v-on:click="makeActive('home')">Home</a>
       <a href="#" class="projects" v-on:click="makeActive('projects')">projects</a>
       <a href="#" class="services" v-on:click="makeActive('services')">services</a>
       <a href="#" class="contact" v-on:click="makeActive('contact')">contact</a>
     </nav>
     <p >你选择了{{active}}</p>
    </div>
    <script>
     
        var vm = new Vue({
          el: '#app',
          data: {
              active: 'home'
          },
          methods: {
            makeActive: function(item){
              this.active = item
            }
          }
          
        });
        vm.products.qty = "1";
        console.log(vm)
        
    </script>
</body>

</html>